<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>oauth2 demo</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width" />
    <base href="/" />
    <link rel="stylesheet" type="text/css"
          href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript"
            src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app" ng-controller="home as home">
<div class="container" ng-show="!home.authenticated">
    <a href="/login">Login</a>
</div>
<div class="container" ng-show="home.authenticated">
    Logged in as: <span ng-bind="home.user"></span>
    <div>
        <button ng-click="home.logout()" class="btn btn-primary">Logout</button>
    </div>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript">
		angular
				.module("app", [])
				.config(
						function($httpProvider) {
							$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
						}).controller("home", function($http, $location) {
					var self = this;
					$http.get("/user").success(function(data) {
						self.user = data.name;
						self.authenticated = true;
					}).error(function() {
						self.user = "N/A";
						self.authenticated = false;
					});
					self.logout = function() {
						$http.post('logout', {}).success(function() {
							self.authenticated = false;
							$location.path("/");
						}).error(function(data) {
							console.log("Logout failed")
							self.authenticated = false;
						});
					};
				});
	</script>
</body>
</html>